<template>
  <view class="container">
    <view class="card-section">
      <view class="card">
        <view class="card-header">
          <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
          <view class="user-info">
            <text class="name">{{userInfo.name}}</text>
            <text class="id">{{userInfo.studentId}}</text>
          </view>
        </view>
        <view class="card-body">
          <view class="balance">
            <text class="label">卡内余额</text>
            <text class="amount">¥ {{balance}}</text>
          </view>
          <view class="actions">
            <button @click="showRecharge">充值</button>
            <button @click="showQRCode">付款码</button>
          </view>
        </view>
      </view>
    </view>

    <view class="section features-section">
      <view class="section-title">快捷功能</view>
      <view class="features-grid">
        <view class="feature-item" v-for="(feature, index) in features" :key="index" @click="handleFeature(feature)">
          <image :src="feature.icon" mode="aspectFit"></image>
          <text>{{feature.name}}</text>
        </view>
      </view>
    </view>

    <view class="section records-section">
      <view class="section-header">
        <text class="section-title">消费记录</text>
        <text class="more" @click="viewAllRecords">查看全部</text>
      </view>
      <view class="records-list">
        <view class="record-item" v-for="(record, index) in records" :key="index">
          <view class="record-info">
            <text class="location">{{record.location}}</text>
            <text class="time">{{record.time}}</text>
          </view>
          <text class="amount" :class="record.type">{{record.type === 'expense' ? '-' : '+'}}¥ {{record.amount}}</text>
        </view>
      </view>
    </view>

    <view class="section recommend-section">
      <view class="section-title">消费建议</view>
      <view class="recommend-list">
        <view class="recommend-item" v-for="(item, index) in recommendations" :key="index">
          <image :src="item.icon" mode="aspectFit"></image>
          <view class="recommend-info">
            <text class="title">{{item.title}}</text>
            <text class="desc">{{item.description}}</text>
          </view>
          <button @click="useRecommend(item)">去使用</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '张三',
        studentId: '2024001001',
        avatar: '/static/avatar/default.jpg'
      },
      balance: 168.50,
      features: [
        { name: '门禁记录', icon: '/static/icons/door.png', type: 'door' },
        { name: '失卡挂失', icon: '/static/icons/lost.png', type: 'lost' },
        { name: '消费统计', icon: '/static/icons/stats.png', type: 'stats' },
        { name: '优惠活动', icon: '/static/icons/discount.png', type: 'discount' }
      ],
      records: [
        {
          location: '第一食堂',
          time: '2024-03-17 12:30',
          amount: 15.00,
          type: 'expense'
        },
        {
          location: '校园超市',
          time: '2024-03-17 10:15',
          amount: 8.50,
          type: 'expense'
        },
        {
          location: '在线充值',
          time: '2024-03-16 18:20',
          amount: 100.00,
          type: 'income'
        }
      ],
      recommendations: [
        {
          title: '食堂套餐优惠',
          description: '根据您的就餐习惯，推荐第一食堂特惠套餐',
          icon: '/static/icons/meal.png'
        },
        {
          title: '图书馆自习室',
          description: '您经常在晚上学习，建议预约图书馆专属座位',
          icon: '/static/icons/library.png'
        }
      ]
    }
  },
  methods: {
    showRecharge() {
      uni.navigateTo({
        url: '/pages/campus/card/recharge'
      })
    },
    showQRCode() {
      uni.navigateTo({
        url: '/pages/campus/card/qrcode'
      })
    },
    handleFeature(feature) {
      const routes = {
        door: '/pages/campus/card/door-records',
        lost: '/pages/campus/card/report-lost',
        stats: '/pages/campus/card/statistics',
        discount: '/pages/campus/card/discounts'
      }
      uni.navigateTo({
        url: routes[feature.type]
      })
    },
    viewAllRecords() {
      uni.navigateTo({
        url: '/pages/campus/card/records'
      })
    },
    useRecommend(item) {
      // TODO: 处理推荐项点击
      uni.showToast({
        title: '正在为您处理',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  
  .card-section {
    margin-bottom: 30rpx;
    
    .card {
      background: linear-gradient(135deg, #1890ff, #096dd9);
      border-radius: 20rpx;
      padding: 30rpx;
      color: #FFFFFF;
      
      .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 30rpx;
        
        .avatar {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          border: 4rpx solid rgba(255,255,255,0.3);
        }
        
        .user-info {
          margin-left: 20rpx;
          
          .name {
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
            display: block;
          }
          
          .id {
            font-size: 24rpx;
            opacity: 0.8;
          }
        }
      }
      
      .card-body {
        .balance {
          text-align: center;
          margin-bottom: 30rpx;
          
          .label {
            font-size: 24rpx;
            opacity: 0.8;
            margin-bottom: 10rpx;
            display: block;
          }
          
          .amount {
            font-size: 48rpx;
            font-weight: bold;
          }
        }
        
        .actions {
          display: flex;
          gap: 20rpx;
          
          button {
            flex: 1;
            height: 80rpx;
            line-height: 80rpx;
            background: rgba(255,255,255,0.2);
            border: none;
            color: #FFFFFF;
            font-size: 28rpx;
            
            &:active {
              background: rgba(255,255,255,0.3);
            }
          }
        }
      }
    }
  }
  
  .section {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
      
      .section-title {
        font-size: 32rpx;
        font-weight: bold;
      }
      
      .more {
        font-size: 28rpx;
        color: #1890ff;
      }
    }
  }
  
  .features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
    
    .feature-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      image {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 10rpx;
      }
      
      text {
        font-size: 24rpx;
        color: #333;
      }
    }
  }
  
  .records-list {
    .record-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #F5F5F5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .record-info {
        .location {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 6rpx;
          display: block;
        }
        
        .time {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .amount {
        font-size: 32rpx;
        font-weight: bold;
        
        &.expense {
          color: #ff4d4f;
        }
        
        &.income {
          color: #52c41a;
        }
      }
    }
  }
  
  .recommend-list {
    .recommend-item {
      display: flex;
      align-items: center;
      padding: 20rpx;
      background: #f8f8f8;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      image {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
      }
      
      .recommend-info {
        flex: 1;
        
        .title {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 6rpx;
          display: block;
        }
        
        .desc {
          font-size: 24rpx;
          color: #666;
        }
      }
      
      button {
        font-size: 24rpx;
        padding: 10rpx 30rpx;
        background: #1890ff;
        color: #FFFFFF;
        border-radius: 30rpx;
      }
    }
  }
}
</style> 